<script>
//编辑组件右侧
import ChartConfig from '../../../workspace/chartconfig/ChartConfig';
import ConfigFactory from '../../../workspace/chartconfig/config/config-factory';

import { mapGetters } from 'vuex';
import * as types from '@/store/types';

export default {
  name: 'FormEditRightSider',
  components: {
    ChartConfig,
  },
  data() {
    return {
      chartType: '',
    };
  },
  computed: {
    ...mapGetters(['controls', 'currentId']),
  },
  watch: {
    controls() {
      this.initTableConfig();
    },
  },
  created() {
    this.initTableConfig();
  },
  methods: {
    initTableConfig() {
      //判断store是否已初始化
      if (Object.keys(this.controls).length == 0) return;
      //初始化表格配置
      let currentControl = this.controls[this.currentId];
      let chartOptions = currentControl.options;
      if (Object.keys(chartOptions.settings).length == 0) {
        chartOptions.settings = ConfigFactory.getTableConfig();
        this.$store.commit(types.UPDATE_CHART_CONFIG, {
          data: { [this.$store.getters.currentId]: currentControl },
        });
      }
      //初始化配置编辑器
      !this.chartType && (this.chartType = 'table');
    },
  },
};
</script>
<template>
  <div class="datav-table-config">
    <h3>表格配置</h3>
    <ChartConfig :chart-type="chartType"></ChartConfig>
  </div>
</template>
<style lang="less" scoped>
.datav-table-config {
  height: 100%;
  h3 {
    margin: 10px 15px;
    color: #666666;
  }
  .config-wrapper {
    height: calc(~'100vh - 160px');
  }
}
</style>
